<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>the global object</title>
    <script type="text/javascript">
      // 理解 "the global object"
      // 在 浏览器 中可以通过 window 直接访问 "the global object"
      console.log(window);
      // 在 浏览器 中也可以通过 globalThis 访问 "the global object"
      console.log( globalThis );

      console.log(Object.keys(window));
      console.log("- ".repeat(20));
      console.log(Object.getOwnPropertyNames(window));
      // 在 浏览器环境 中 直接书写在 script 中的代码都是全局的
      var username = 'jack' ;
      console.log( username );
      console.log( window.username );
    </script>
  </head>
  <body>
      <p>the global object</p>
      <ul>
          <li>
              <b>node.js</b>
              <ul>
                  <li>可以通过 global 变量来访问 "the global object"</li>
                  <li>也可以通过 globalThis 变量来访问 "the global object"</li>
              </ul>
          </li>
          <li>
              <b>浏览器</b>
              <ul>
                <li>可以通过 window 变量来访问 "the global object"</li>
                <li>也可以通过 globalThis 变量来访问 "the global object"</li>
            </ul>
          </li>
      </>
  </body>
</html>
